<template>
  <div class="files">
    <!-- <div v-if="type == ' '" class="loading">
      加载中...
    </div> -->
    <div v-if="url == ''" class="tips">请先上传文件！</div>
    <div v-if="type == 'word' && url != ''" ref="word" class="word"></div>
    <iframe
      v-if="type == 'pdf' && url != ''"
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
    >
    </iframe>
    <!-- <iframe
      v-if="type == 'word'"
      :src="'https://view.officeapps.live.com/op/view.aspx?src=' + url"
      width="100%"
      height="100%"
      frameborder="0"
    >
    </iframe> -->
  </div>
</template>
<script>
import request from "@/utils/requist";
let docx = require("docx-preview");
export default {
  data() {
    return {
      type: "",
      url: "",
    };
  },
  mounted() {
    let url = this.$route.query.url || "";
    if (url == "") {
      return;
    }
    if (url.lastIndexOf("docx") != -1) {
      url = url.replace(
        "https://zysf-store.oss-cn-beijing.aliyuncs.com",
        "/file"
      );
      this.type = "word";
      this.url = url;
      this.downloadFile();
    } else {
      this.url = url;
      this.type = "pdf";
    }
  },
  methods: {
    downloadFile() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      this.$axios({
        method: "get",
        // params: { fileId: this.fileId },
        url: this.url, // 下载文件接口地址
        // 文件流
        responseType: "blob",
      })
        // request({
        //   method: "get",
        //   url: this.url,
        //   urlType:'api2',
        //   responseType: "blob",
        // })
        .then((res) => {
          // console.log(res);
          // 渲染在界面上
          docx.renderAsync(res.data, this.$refs.word).then((res) => {});
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.files,
.word,
.pdf {
  width: 100%;
  height: 100%;
}
.word {
  overflow-y: scroll;
}
.tips {
  margin: 20px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
</style>
